Skip to main content

Billing and Subscriptions

Learn how SvelteBolt's subscription system works and how to implement premium features with proper access control.

Overview​

SvelteBolt includes a complete subscription system built on top of Stripe, allowing you to easily implement tiered pricing with different feature access levels. The system supports multiple subscription plans (Plus and Pro) with automatic billing and access control.

Subscription Plans​

SvelteBolt comes with utility functions to check subscription status:

  • Active Subscription - User has an active or trialing subscription
  • Plus Plan - User has an active Plus plan subscription
  • Pro Plan - User has an active Pro plan subscription

Utility Functions​

// Check if user has any active subscription
isSubscribed(subscription);

// Check if user has Plus plan
isPlusPlan(subscription);

// Check if user has Pro plan
isProPlan(subscription);

Premium Feature Check Page​

SvelteBolt includes a demonstration page at /dashboard/premium-feature that shows how to implement feature access control based on subscription status. This page serves as a template for creating your own premium features.

Purpose​

The premium feature check page demonstrates:

  1. Dynamic Content - Shows different messages based on subscription status
  2. Visual Feedback - Uses icons and colors to indicate access status
  3. Clear Messaging - Provides helpful guidance for users without access
  4. Upgrade Prompts - Encourages free users to upgrade their plan

How It Works​

The page uses reactive Svelte statements to dynamically update content based on the user's subscription:

$: if (isPlusPlan(page?.data?.subscription)) {
  title = "Plus Plan Feature";
  message = "This feature is available for Plus plan subscribers.";
  IconComponent = Check;
  iconColor = "text-green-500";
} else if (isProPlan(page?.data?.subscription)) {
  title = "Pro Plan Feature";
  message = "This feature is available for Pro plan subscribers.";
  IconComponent = Check;
  iconColor = "text-green-500";
} else {
  title = "Upgrade Required";
  message = "This feature is available for Plus and Pro plan subscribers.";
  additionalText = "Please upgrade your plan to access this feature.";
  IconComponent = X;
  iconColor = "text-red-500";
}

Implementation Pattern​

When creating your own premium features, follow this pattern:

  1. Check Subscription Status - Use the utility functions to verify access
  2. Provide Clear Feedback - Show users whether they have access
  3. Guide Next Steps - For users without access, provide upgrade options
  4. Graceful Degradation - Handle cases where subscription data isn't available

Creating Premium Features​

Step 1: Add Access Control​

Wrap your premium feature content with subscription checks:

<script>
  import { page } from "$app/state";
  import { isPlusPlan, isProPlan } from "$lib/stripe/utils";

  $: hasAccess =
    isPlusPlan(page?.data?.subscription) || isProPlan(page?.data?.subscription);
</script>

{#if hasAccess}
<!-- Your premium feature content -->
<PremiumComponent />
{:else}
<!-- Upgrade prompt -->
<UpgradePrompt />
{/if}

Step 2: Server-Side Protection​

For API routes or server-side features, implement similar checks:

// +page.server.ts
import { isSubscribed, isPlusPlan } from "$lib/stripe/utils";

export const load = async ({ locals }) => {
  const subscription = locals.user?.subscription;

  if (!isPlusPlan(subscription)) {
    throw error(403, "Plus plan required");
  }

  // Continue with premium feature logic
};

Step 3: Progressive Enhancement​

Consider implementing features that work for all users but provide enhanced functionality for premium subscribers:

{#if isPlusPlan(page?.data?.subscription)}
<EnhancedFeature />
{:else}
<BasicFeature />
<UpgradePrompt feature="Enhanced Analytics" />
{/if}

Best Practices​

User Experience​

  1. Clear Value Proposition - Explain what premium features offer
  2. Gradual Exposure - Let free users see what they're missing
  3. Easy Upgrade Path - Provide clear upgrade buttons and links
  4. Graceful Fallbacks - Always have a good experience for free users

Technical Implementation​

  1. Client and Server Checks - Implement checks on both ends for security
  2. Consistent Messaging - Use the same subscription utility functions everywhere
  3. Error Handling - Handle cases where subscription data is unavailable
  4. Performance - Cache subscription status to avoid repeated checks

Security Considerations​

  1. Never Trust Client-Side - Always verify subscription status server-side for sensitive operations
  2. API Protection - Protect premium API endpoints with middleware
  3. Data Access - Ensure premium data is only accessible to subscribers
  4. Regular Validation - Periodically re-check subscription status

Example Use Cases​

Analytics Dashboard​

{#if isProPlan(subscription)}
<AdvancedAnalytics />
{:else}
<BasicAnalytics />
<UpgradePrompt feature="Advanced Analytics" />
{/if}

Export Features​

{#if isPlusPlan(subscription) || isProPlan(subscription)}
<ExportButton />
{:else}
<DisabledExportButton />
{/if}

API Rate Limits​

const rateLimit = isProPlan(subscription)
  ? 1000
  : isPlusPlan(subscription)
  ? 100
  : 10;

Next Steps​

  1. Customize Plans - Modify the utility functions to match your pricing tiers
  2. Add Features - Create new premium features using the demonstrated patterns
  3. Configure Stripe - Set up your product catalog and pricing in Stripe
  4. Test Thoroughly - Verify access control works correctly across all scenarios

The premium feature check page provides a solid foundation for implementing subscription-based features in your SaaS application.